iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
自我挑戰組

小白網頁設計練成記系列 第 6

小白網頁設計練成記-DAY6-延續前話HTML5 中的 b / strong,i / em 有什么区别?

  • 分享至 

  • xImage
  •  

上次我們有提到 < b > 和 < strong > 同樣都有將字體加粗的效果,同樣< i > 和 < em > 也是斜體的視覺效果,所以初次碰到的小白可能都會想,既然效果一樣為甚麼要多此一舉呢?

這就要提到HTML5語義話的特性,在HTML的世界裡,每個標籤都有它特定的語意

< b > 和 < strong > < i > 和 < em >同樣也各自有自己的不同,下面就來介紹這4個標籤的語義。

< i >

根據W3c對< i >的定義:< i >元素代表在普通文本中具有不同語態或語氣的一段文本,某種程度上表明一段不同特性的文本,比如一個分類學名稱,一個技術语,一個外語習語,一個音译,一個个想法,或者西方文本中的一艘船名。

#分類學名稱
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

#術語
<p>The term <i>prose content</i> is defined above.</p>

#外語習語
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

< b >

根據 W3C 对 < b > 的定义:b 元素代表側重實用目的而不带有任何额外重要性,也不暗示不同語態或語氣的一段文本,比如一段文本摘要中的關鍵詞、一段審查中的產品名稱、文本驅動軟件中的可執行語句或者一篇文章的導語。

#下面的< b >起到突出關鍵詞的作用,但不具備强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

#下面的< b >讓被包圍的詞特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

#下面的 b 元素標註了文章的導語
<article>
  <h2>Kittens 'adopted' by pet rabbit</h2>
  <p><b class="lede">Six abandoned kittens have found an
    unexpected new mother figure — a pet rabbit.</b></p>
  <p>Veterinary nurse Melanie Humble took the three-week-old
    kittens to her Aberdeen home.</p>
  ...
</article><em>

< em >

根据 W3C 对 < em > 的定义:
em 元素代表對其内容的强调,强调位置的不同通常会带来整个句子含義的變化。
看下面舉的例子:

#這是一句不带任何强调的句子
<p>Cats are cute animals.</p>

#< em >包裹 Cats,强調猫是種可愛的動物,而不是狗或者其他動物
<p><em>Cats</em> are cute animals.</p>

#< em >包裹 are,代表句子所說是事實,来反駁那些說猫不可愛的人
<p>Cats <em>are</em> cute animals.</p>

#< em >包裹 cute,强調猫是一種可愛的動物,而不是有人說的刻薄、討厭的動物
<p>Cats are <em>cute</em> animals.</p>

#這裡强調猫是動物,而不是植物
<p>Cats are cute <em>animals</em>.</p>

< strong >

根據 W3C 对 < strong > 的定義:< strong >代表内容的强烈的重要性、嚴重性或者緊急性。

重要性
< strong > 可以被用在標題(heading)、說明(caption)或者段落(paragraph)上,来顯示這部分被包圍的文字的重要性。

#章節序號不重要,章節的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong></h1>

严重性

< strong > 可以被用来標記警告或者警示標誌。
<p><strong>Warning.</strong> This dungeon is dangerous.</p>

紧急性
< strong >可以被用来表示需要被盡快看見的部分。
需要注意的是,< strong > 元素僅僅对文本内容的重要性、嚴重性或緊急性产生作用,而不像 < em > 對句子含義進行改變。

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

小结

< em > 用於對文本内容進行强調,强調位置的不同通常會改變句子的含義。
如果僅僅在語態或語氣上為了突出某一個文本,那應該使用 < i >。
但如果為了突出某一部分的重要性、严重性或紧急性,那应该使用 < strong >。
根據 W3C 对元素的说明,< b > 元素應當是在其他標籤都不合適的情况下最後一個考慮使用的標籤。
相同的,在考慮使用 < i > 之前,也要想想是否用 < em >、< strong >、< dfn > 或 < mark > 等元素更合適。

我是結語

今天是鐵人賽第6天,我學習網路設計的第13天,現在基本上都是在往不熟悉的部分鑽研,最主要還是希望自己的基礎打好一點,知道網頁設計的每一步用意~大家共勉囉~

參考出處:https://www.zhihu.com/question/19551271/answer/146298923


上一篇
小白網頁設計練成記-DAY5-淺談HTML文本格式化
下一篇
小白網頁設計練成記-DAY7-表格怎麼設置?
系列文
小白網頁設計練成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言